<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  <title>过渡动画</title>
  <style>
    .box{
      height:200px;
      width:200px;
      background:lightcoral;
    }
    /* 自定义动画效果 */
    /* 进来时候 enter-active enter-to 出去的时候 leave-active leave-to*/
    .fadeIn-enter, .fadeIn-leave-to{
      opacity:0;
    }
    .fadeIn-enter-active, .fadeIn-leave-active{
      transition: all 1s;
    }
    .fadeIn-enter-to, .fadeIn-leave{
      opacity:1;
    }

    .box{
      width:200px;
      height:200px;
      background:lightcoral;
      position:absolute;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="flag = !flag">点击</button>
    <transition 
      enter-active-class="animated bounceInLeft"
      leave-active-class="animated bounceOutRight">
      <!-- <div class="box" v-show="flag"></div> -->
      <div v-show="flag" >
        <h1>hello animate</h1>
      </div>
    </transition>
    <transition-group 
      enter-active-class="animated bounceInLeft"
      leave-active-class="animated bounceOutRight">
      <div v-show="flag" :key="1"><h1>animate 1</h1></div>
      <div v-show="flag" :key="2"><h1>animate 2</h1></div>
      <div v-show="flag" :key="3"><h1>animate 3</h1></div>
    </transition-group>
    <p>
      {{obj.name}}
    </p>
    <h2>样式操作class和style</h2>
    <div :class="box">wwwwwwwwwwwww</div>
    <button-counter title="hello"></button-counter>
    <button-counter title="world"></button-counter>
    <button-counter ></button-counter>
    <!-- 自定义指令 -->
    <div v-red>让字体颜色变红</div>
    <div v-color="'green'">自定义指令</div>
    <div class="box" v-drag>拖拽元素</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script>
    /**
      每个组件都会各自独立维护它的count, 因为每用一次组件，就会有一个它的新实例被创建
      每个实例可以维护一份被返回对象的独立的拷贝，一个组件的data选项必须是一个函数
    */
    Vue.component('button-counter', {
      data(){
        return {
          count: 0
        }
      },
      // 接受父组件传递的数据
      props: ['title'],
      template: '<button v-on:click="count++">{{title}} you clicked me {{count}} times</button>'
    })


    let vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        aa: 'zf',
        val: '珠峰',
        obj: {name: 'z3'},
        box: "box1"
      },
      // 定义的时候不用加v- 只要加就执行函数
      directives: {
        red(el){
          console.log(arguments)
          el.style.color = "red"
        },
        color(el, parm){
          console.log(parm.value) // 使用指令的时候赋的值
          el.style.color = parm.value
        },
        drag(el){
          el.onmousedown = function(e){
            this.l = e.clientX - this.offsetLeft
            this.t = e.clientY - this.offsetTop
            document.onmousemove=(e)=>{
              // 这里的this是el
              this.style.left = (e.clientX - this.l) + 'px' 
              this.style.top = (e.clientY - this.t) + 'px'
            }
            document.onmouseup = ()=>{
              document.onmousemove = null
              document.onmouseup = null
            }
            e.preventDefault()
          }
          
        }
      },
      methods: {},
      computed: {
        ss(){
          // 必须要有return 不支持异步
          let a = 'px'
          // setTimeout(()=>{
          //   this.aa += a
          // }, 1000)

          return this.aa
        }
      },
      // 监控某个属性是否发生变化 监控在data中初始化的属性 
      watch:{
        // val 是被监控的属性，写成一个函数的形式，只要被监控的值发生变化，就会触发这个函数，默认不会执行一次
        // val(newVal, oldVal){
        //   console.log(newVal, oldVal)
        // }
        val: {
          handler(newVal, oldVal){
            console.log(newVal, oldVal)
          },
          // 第一次执行
          immediate: true
        },
        obj:{
          handler(newVal, oldVal){
            console.log(newVal.name, oldVal.name)
          },
          // 深度监测 如果想要监控到属性的改变，就要加一个deep:true
          // handler传的新值和旧值，都是改变后的值
          deep: true
        }

      }
    })

    /*
      ruhekongzhi ziji shangban de jinzhang qingxu
        weishenme zaijia bu jinzhang, zuozai bangongshi jiu kaishi jinzhang
        huanjing he renwu buyiyang ru guo
        daishang erji gengjia jinzhang, dui waijie buquedingxing zengjia 
        jinzhang yuanyu dui waijie de kongju haipa 
        jijiang shangtai de shihou jinzhang he xianzai yiyangma 
        dui weizhi de kongju buzhidao jianglai hui fasheng shenme
        xianzai shi bangongshi you buhui rangni yanjiang na ni weishenme
        hui jinzhang ne, 

        weishenme youde ren buxihuan bangong fenwei er cizhi
        zhe ge huanjing yijing gongzuo 2 nian le weishenme ni haihui dui zhege huanjing
        kongju ne, 
            weishenme yelili lijianliang wanyaqin buhui jinzhang
            weishenme xiaoqing he ni douhui jinzhang 
              1, yiwei ni duimian zuo de shi yuliang jingli, houmian meijue yibangren
              2, xiaoqing hui rangni jinzhang ma? 
              3, niziji changchang danxin youren dingzheni, 
            gongsi benlai nansheng jiu henshao, weisheng you duo chulaige xiang nvsheng 
            xingge de ni, nanren jiu yinggai bi tamen dabufenren yonggan zhudong 
            ni shi dasao weisheng zhong weiyi yige nanren, 
                1, zuo zuilei de huo
                2, 
        chanshengyuanyin: 
        mamu lingxie qingxubushoukongzhi meiren jiudeliaowo haoxiang jieshu 
        zhende henlei bu xiangjianchi de xianfa yuelaiyueqianglie 
        sixinliefeide anhan meirentindao meiren gantongshenchu 
    */
  </script>
</body>
</html>